<template>
    <div class="order-page">
        <cu-navbar>
            <block slot="content">订单</block>
        </cu-navbar>
        <view class="order-container">
            <div class="tabs">
                <u-tabs active-color="#FF2E26" inactive-color='#888' :current="tabValue" :list="tabsList" :is-scroll="false" @change="changeTab" ></u-tabs>
            </div>
            <div class="f-r a-c input-box">
                <u-search shape="square" :showAction="false" bgColor="#f8f8f8" v-model="searchValue" placeholder="请输入搜索内容" inputAlign="left" height="70rpx"></u-search>
            </div>
            <div class="order-list">
                <div class="order-item" v-for="(item,index) in orderListShow" :key="item.order_sn">
                    <div class="order-header f-r a-c j-b">
                        <div class="order-num">订单编号：{{ item.order_sn }}</div>
                        <div class="order-status" v-if="item.op_status == 15">
                            <div class="text" >封存中</div>
                        </div>
                        <div class="order-status" v-else>
                            <div v-if="item.status == 0" class="text" >待付款</div>
                            <div v-if="item.status == 1" class="text">待收款</div>
                            <div v-if="item.status == 2" class="text">
                                <span v-if="item.op_status == 10">拆分中</span>
                                <span v-else-if="item.op_status == 2">可委卖</span>
                                <span v-else-if="item.op_status == 11">拆分拒绝</span>
                                <span v-else-if="item.op_status == 12">拆分成功</span>
                                <span v-else-if="item.op_status == 13">提货成功</span>
                                <span v-else>已完成</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-content f-r">
                        <u-image :src="item.product_image" width="160rpx" height="160rpx"></u-image>
                        <div style="margin-left: 20rpx;">
                            <div class="order-name">{{ item.product_name }}</div>
                            <div class="order-price">
                                <span>出货价：</span>
                                <span class="order-price1">￥{{ item.total }}</span>
                            </div>
                            <div class="order-price2">
                                <span>进货价：</span>
                                <span class="order-price2">￥{{ item.pay_total }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-date">{{ item.create_time }}</div>
                    <div v-if="(item.status == 2 && item.op_status == 10) || item.op_status == 13 || item.op_status == 15"></div>
                    <div class="f-c" style="width: 100%;"  v-else>
                        <span></span>
                        <!--    买家     isbuyer 1买家  -->
                      <div class="pay-list" v-if="(item.isbuyer === 1 && item.status == 0) || (item.isbuyer === 1 && item.status == 1)">
                        <u-checkbox-group @change="checkboxGroupPayChange">
                          <u-checkbox
                              @change="checkboxPayChange"
                              v-model="subitem.checked"
                              v-for="(subitem, subindex) in item.payList" :key="subindex"
                              :name="subitem.name"
                          >{{subitem.name}}</u-checkbox>
                        </u-checkbox-group>
                        <div class="uploadList" style="display: flex;align-items: center;flex-wrap: wrap">
                          <u-upload
                              :width="150"
                              :height="150"
                              @on-success="(e) => uploadweixinpic(e,item)"
                              @on-remove="(e) => removeweixinpic(e,item)"
                              name="file"
                              :action="action"
                              upload-text="付款凭证1"
                              :max-count="1" :header="header" :file-list="item.weixinpicList" ></u-upload>
                          <u-upload
                              :width="150"
                              :height="150"
                              @on-success="(e) => uploadAlipic(e,item)"
                              @on-remove="(e) => removeAlipic(e,item)"
                              name="file"
                              :action="action"
                              upload-text="付款凭证2"
                              :max-count="1" :header="header" :file-list="item.aliPicList" ></u-upload>
                          <u-upload
                              :width="150"
                              :height="150"
                              @on-success="(e) => uploadavatar(e,item)"
                              @on-remove="(e) => removeavatar(e,item)"
                              name="file"
                              :action="action"
                              upload-text="付款凭证3"
                              :max-count="1" :header="header" :file-list="item.avatarList" ></u-upload>
                        </div>
                      </div>
                        <div v-if="item.isbuyer === 1" class="button-list f-r a-c j-e">
                          <div v-if="item.status == 0" class="button" @click="view_pay(item,index)">查看付款码</div>
                          <div v-if="item.status == 0" class="button" @click="confirm_pay(item,index)">确认付款</div>
                          <div v-if="item.status == 1" class="button" @click="confirm_pay(item,index)">确认修改</div>
                            <template v-if="item.status == 2">
                                <div v-if="item.op_status == 11 || item.op_status == 2" class="button" @click="chaifen(item)">换购</div>
                                <div v-if="item.op_status == 11 || item.op_status == 2" class="button" @click="sell(item)">委托代卖</div>
                                <div v-if="item.op_status == 11 || item.op_status == 2" class="button" @click="tihuo(item)">提货</div>
                            </template>
                        </div>
                        <!--    卖家     isbuyer 0卖家  -->
                        <div v-if="item.isbuyer === 0">
                          <div class="f-r a-c" style="margin: 20px 0">
                            <span>付款方式：</span>
                            {{item.payText || ''}}
                          </div>
                          <div class="f-r a-c" style="margin: 20px 0">
                            <span >付款凭证：</span>
                            <u-image v-if="item.wx_img" style="width: 160rpx;height: 160rpx;margin: 0 5px" class="pay-img" :src="item.wx_img"  @click="previewImg(item.wx_img)"></u-image>
                            <u-image v-if="item.zfb_img" style="width: 160rpx;height: 160rpx;margin: 0 5px" class="pay-img" :src="item.zfb_img"  @click="previewImg(item.zfb_img)"></u-image>
                            <u-image v-if="item.qita_img" style="width: 160rpx;height: 160rpx" class="pay-img" :src="item.qita_img"  @click="previewImg(item.qita_img)"></u-image>
                          </div>
                          <div class="button-list f-r a-c j-e">
                            <div v-if="item.status == 1" class="button" @click="confirm_get(item)">确认收款</div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 古玩拆分 -->
            <u-popup v-model="show" mode="center">
                <view class="box_popup box_popup1">
                    <view>拆封</view>
                    <view>输入拆分数量，可拆分成2份或3份
                        拆分后的价格不小于2000</view>
                    <input type="text" v-model="chaifenNum" />
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="confirm_chaifen">确定</view>
                    </view>
                </view>
            </u-popup>
          <!-- 付款码信息 -->
          <u-popup v-model="show2" mode="center">
            <view class="box_popup box_popup1">
              <view>付款码信息</view>
              <div class="payresult" v-for="item in payResult" :key="item.type">
                <div class="pay-name">{{ item.name }}</div>
                <div>
                  <u-image v-if="item.img" style="width: 160rpx;height: 160rpx" class="pay-img" :src="item.img"  @click="previewImg(item.img)"></u-image>
                  <div>
                    {{ item.cardnum }} {{ item.username }}
                  </div>
                </div>
              </div>
            </view>
          </u-popup>
            <u-empty
                v-if="!orderListShow.length"
                mode="order"
            />
            <footer-page
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
        </view>
    </div>
</template>

<script>
	import footerPage from "@/components/footer-page/index.vue";
	import page from '@/mixins/page'
  import {API_URL} from "../../env";
	const tabMap = {
		6: 0,
		0: 1,
		1: 2,
		2: 3,
	}
	const tabMap2 = {
		0: 6,
		1: 0,
		2: 1,
		3: 2,
	}
	export default {
		  components: {
		    footerPage,
		  },
		  mixins: [page],
		data() {
			return {
        action: `${API_URL}index.php/api/common/upload`,
        apiUrl: API_URL,
        header: {
          token: uni.getStorageSync("token"),
        },
				searchValue: '',
				tabsList: [
					{ name: '全部', value: '6' },
					{ name: '待付款', value: '0' },
					{ name: '待收款', value: '1' },
            { name: '委托代卖', value: '2' },
				],
				orderList: [
				],
				tabValue: 0,
        chaifenNum: 0,
        show: false,
        show2: false,
        payResult: []
			}
		},
    computed: {
      orderListShow() {
        return this.orderList.filter(el => el.product_name.includes(this.searchValue)).map(el => {
          return {
            ...el
          }
        })
      }
    },
		onLoad(options) {
			this.tabValue = tabMap[options.type]
		},
    onShow() {
      this.getList()
    },
		onPullDownRefresh() {
		this.page = 1
			this.getList()
		},
		methods: {
			changeTab(e) {
				this.tabValue = e
				this.page = 1
				this.getList()
			},
			getList() {
				this.$api.orderList({
					page: this.page,
					pagesize: this.pagesize,
					status: tabMap2[this.tabValue],
				}).then(res => {
					console.log(res)
					this.orderList = []
          setTimeout(() => {
            this.orderList = res.result.items.map(el => {
              return {
                ...el,
                payList: [
                  {
                    name: '微信',
                    checked: el.wx_title == 1,
                    disabled: false
                  },
                  {
                    name: '支付宝',
                    checked: el.zfb_title == 1,
                    disabled: false
                  },
                  {
                    name: '银行卡',
                    checked: el.yhk_title == 1,
                    disabled: false
                  },
                  {
                    name: '其他',
                    checked: el.qita_title == 1,
                    disabled: false
                  }
                ],
                weixinpicList: el.wx_img ? [{
                  url: el.wx_img
                }] : [],
                aliPicList: el.zfb_img ? [{
                  url: el.zfb_img
                }] : [],
                avatarList: el.qita_img ? [{
                  url: el.qita_img
                }] : [],
                payText: [
                  el.wx_title === 1 ? '微信支付' : '',
                  el.zfb_title === 1 ? '支付宝支付' : '',
                  el.yhk_title === 1 ? '银行卡支付' : '',
                  el.qita_title === 1 ? '其他支付' : '',
                ].filter(el => el).join('，'),
              }
            })
            this.pageTotal = res.result.pageTotal
            this.pageSize = res.result.pageSize
            uni.stopPullDownRefresh()
          },300)
				})
			},
			// 付款
      confirm_pay(item) {
				this.$common.modelShow('提示', '确认付款？',() => {
          let formData = {
            order_sn: item.order_sn,
            zfb_img: item.zfb_img || '',
            wx_img: item.wx_img|| '',
            qita_img: item.qita_img|| '',
            zfb_title: item.payList.find(el => el.name === '支付宝').checked ? 1 : 0,
            wx_title: item.payList.find(el => el.name === '微信').checked ? 1 : 0,
            qita_title: item.payList.find(el => el.name === '其他').checked ? 1 : 0,
            yhk_title: item.payList.find(el => el.name === '银行卡').checked ? 1 : 0,
          }
          console.log(formData)
          if (!formData.zfb_img && !formData.wx_img && !formData.qita_img) return uni.showToast({ icon: 'none', title: '至少上传一个付款凭证'})
          if (!formData.zfb_title && !formData.wx_title && !formData.qita_title && !formData.yhk_title) return uni.showToast({ icon: 'none', title: '至少选择一个付款方式'})
          this.$api.pay(formData).then(res2 => {
            if (res2.code == 1) {
              this.page = 1
              this.getList()
              setTimeout(() => {
                uni.showToast({
                  icon: 'none',
                  title: res2.reason
                })
              })
            }
          })
				})
			},
      // 查看付款码
      view_pay(item) {
        console.log(item)
        this.$api.getOrderPayPhotoList({
          seller_id: item.seller_id
        }).then(res => {
          if (res.code == 1) {
            this.show2 = true
            const nameMap = {
              1: '银行卡',
              2: '微信',
              3: '支付宝',
              4: '其他'
            }
            const imgMap = {
              1: '',
              2: 'clientname',
              3: 'clientname',
              4: 'clientname'
            }
            const usernameMap = {
              1: 'bank',
              2: 'cardnum',
              3: 'cardnum',
              4: 'cardnum'
            }
            const carnumMap = {
              1: 'cardnum',
              2: '',
              3: '',
              4: ''
            }
            this.payResult = res.result.map(el => {
              return {
                name: nameMap[el.type],
                img:  el[imgMap[el.type]],
                username: el[usernameMap[el.type]],
                cardnum: el[carnumMap[el.type]],
              }
            })
          }
        })
      },
			// 收款
      confirm_get(item) {
				this.$common.modelShow('提示', '确认收款？',() => {
					this.$api.pay2({
						order_sn: item.order_sn
					}).then(res => {
            if (res.code == 1) {
              this.page = 1
              this.getList()
              setTimeout(() => {
                uni.showToast({
                  icon: 'none',
                  title: res.reason
                })
              })
            }
					})
				})
			},
			// 卖
			sell(item) {
				this.$common.modelShow('提示', '确认委托代卖？\n所需积分：' + (parseFloat(item.total)*0.025).toFixed(2),() => {
					this.$api.sell({
						order_sn: item.order_sn
					}).then(res => {
            if (res.code == 1) {
              this.page = 1
              this.getList()
              setTimeout(() => {
                uni.showToast({
                  icon: 'none',
                  title: res.reason
                })
              })
            }
					})
				})
			},
      chaifen(item) {
        uni.navigateTo({
          url: '/pages/order-list/chaifen?orderId=' + item.id
        })
      },
      confirm_chaifen() {
        if (!this.chaifenNum) return this.$common.errorToShow('拆分数量不能为空')
        this.$api.chaifen({
          product_sn: this.order.order_sn,
          splitnum: this.chaifenNum,
        }).then(res => {
          if (res.code == 1) {
            this.page = 1
            this.getList()
            setTimeout(() => {
              uni.showToast({
                icon: 'none',
                title: res.reason
              })
            })
            this.show = false
          }
        })
      },
      tihuo(item) {
        this.$common.modelShow('提示', '确认提货？',() => {
          this.$api.tihuo({
            order_sn: item.order_sn
          }).then(res => {
            if (res.code == 1) {
              this.page = 1
              this.getList()
              setTimeout(() => {
                uni.showToast({
                  icon: 'none',
                  title: res.reason
                })
              })
            }
          })
        })
      },
      previewImg(src) {
        uni.previewImage({
          urls: [src], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: "", // 当前显示图片的http链接，默认是第一个
          success: function (res) {},
          fail: function (res) {},
          complete: function (res) {},
          //长按保存到本地
          longPressActions: {
            itemList: ["保存图片到本地"],
            success: (data) => {
              if (data.tapIndex == 0) {
                let url = src;
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: (res) => {
                    uni.showToast({
                      title: "已存至系统相册",
                      icon: "success",
                    });
                  },
                  fail: (res) => {
                    uni.showToast({
                      title: "保存失败",
                      icon: "error",
                    });
                  },
                });
              }
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      },
      checkboxPayChange() {},
      checkboxGroupPayChange() {},
      uploadweixinpic(e,item) {
        item.wx_img = e.result.fullurl
      },
      removeweixinpic(e, item) {
        item.wx_img = ''
      },
      uploadAlipic(e,item) {
        item.zfb_img = e.result.fullurl
      },
      removeAlipic(e,item) {
        item.zfb_img = ''
      },
      uploadavatar(e, item) {
        item.qita_img = e.result.fullurl
      },
      removeavatar(e,item) {
        item.qita_img = ''
      },
		}
	}
</script>

<style lang="scss">
.order-page {
  .order-container {
    .order-list{
    }
  }
	.input-box {
		background-color: #fff;
		    padding: 18px 10px 8px 10px;
	}
	.tabs {
		width: 100%;
		background-color: #fff;
	}
	.order-list {
		padding: 30rpx;
		.order-item {
			margin-bottom: 20rpx;
			border-radius: 4px;
			background-color: #fff;
			padding: 30rpx;
			.order-header {
				.order-num {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
				.order-status {
					font-size: 24rpx;
          .text {
            color: #666;
            font-weight: bold;
          }
				}
			}
			.order-content {
				.order-name {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
				.order-price {
					font-size: 24rpx;
					color: #999;
				}

				.order-price1 {
					color: #f44336;
				}
				.order-price2 {
					font-size: 24rpx;
					color: #999;
				}

			}
			.order-date {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #999;
			}
			.button-list {
				flex-grow: 1;
				margin-top: 10rpx;
				.button {
					background-color: rgb(255, 68, 59);
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					border-radius: 4px;
					margin-left: 10rpx;
					font-size: 24rpx;
					padding: 0 20rpx;
				}
			}
		}
	}
  .payresult {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    .pay-name {
      width: 100rpx;
      flex-shrink: 0;
      font-size: 28rpx;
      line-height: 28rpx;
      margin-right: 10rpx;
      text-align: left;
    }
    .pay-img {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .box_popup {
    width: 662upx;
    text-align: center;

    & view:nth-child(1) {
      margin-top: 32upx;
      color: #333;
      font-size: 32upx;
      font-family: PingFang SC;
      font-weight: 500;
    }

    & view:nth-child(2) {
      margin-top: 38upx;
      font-size: 28upx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fea845;
    }

    .btn {
      display: flex;


      view {
        width: 50%;
        border-top: 2upx solid #e6e6e6;
        opacity: 1;
        text-align: center;
        line-height: 100upx;
      }

      .cancel {
        border-right: 2upx solid #e6e6e6;
        color: #999999;
        font-size: 36upx;
        font-family: PingFang SC;
        font-weight: 500;
      }

      .ok {
        color: #007aff;
        margin-top: 32upx;
        font-size: 36upx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }

  .box_popup1 {
    & view:nth-child(2) {
      width: 424upx;
      font-size: 28upx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fea845;
      margin: 38upx auto 0;
    }

    input {
      width: 424upx;
      border: 2upx solid #e6e6e6;
      margin: 0 auto;
      height: 64upx;
      margin-top: 38upx;
    }
  }
}
</style>
